<template>
  <div class="detail">
   <i class="to-back van-icon van-icon-arrow-left" style="color: rgb(239, 239, 239); font-size: 40px;" @click="onClickLeft"><!----></i>
   <i class="share van-icon van-icon-share-o" style="color: rgb(239, 239, 239); font-size: 40px;" @click="onClickRight"><!----></i>
   <van-cell />
<van-share-sheet

  v-model="showShare"
  title="立即分享给好友"
  :options="options"
 
/>
    <!-- 轮播图 -->
    <Swiper :bannerArr="gallery"></Swiper>
    <div><van-icon class="ic" name="passed" /><span class="ictext">30天无忧退货</span>
    <van-icon class="ic" name="passed" /><span class="ictext">48小时快速退费</span><van-icon class="ic" name="passed" /><span class="ictext">满88元免邮费</span>
    </div>
    <div class="info">
      <h3>{{ info.name }}</h3>
      <p class="p1">{{ info.goods_brief }}</p>
      <p class="p2">{{ info.retail_price | formatMoney }}</p>
    </div>
    <!--商品参数  -->
    <div class="attribute">
        <h3>商品参数</h3>
        <ul>
      <li :key="item.id" v-for="item in attribute">
          <span class="sp1">{{item.name}}</span>
           <span class="sp2"> {{item.value}}</span>
           </li>
  </ul>
    </div>
    <!--  产品详情 -->
 <div class="imgbox">
        <van-divider
  :style="{ color: '#000', borderColor: '#cccccc', padding: '0 90px' ,fontWeight: 700}"
>
  产品详情
</van-divider>
  <p  v-html="goods_desc">{{goods_desc}}</p>
 </div>
<!-- 常见问题 -->
<div class="textbox">
          <van-divider
  :style="{ color: '#000', borderColor: '#cccccc', padding: '0 90px' ,fontWeight: 700}"
>
  常见问题
</van-divider>
<ul>
    <li v-for="item in issue" :key='item.id'>
       <h4>{{item.question}}</h4>
       <p class="p3">{{item.answer}}</p>
    </li>
</ul>
</div>
<!-- 相关产品 -->
<div>
         <van-divider
  :style="{ color: '#000', borderColor: '#cccccc', padding: '0 90px' ,fontWeight: 700}"
>
  相关产品
</van-divider>

</div>
<!-- 底部 -->
 <div class="foot">
     <!-- 加入购物车底部栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车" @click="$router.push('/car')"
        :badge="badge"
       
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCarMaskFn"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
     <!-- 商品规则弹窗 -->
    <!-- 商品规则弹窗 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      ref="myref"
    />
 </div>
  </div>
</template>
<script>
// 详情页数据
import { getDetail ,addCarData,getGoodsCount} from "@/utils/http";
// 引入搜索页数据
// import { searchgoods } from "@/utils/http.js";
//  引入轮播图组件
import Swiper from "@/components/Swiper.vue";
export default {
  name: "Detail",
  data() {
    return {
        showShare:false,//分享
      gallery: [], // 详情页的轮播图数组
      info: {}, //注意获取的是对象
      attribute:[],//商品参数
      goods_desc:[],//产品详情
      issue:[],//常见问题 
      show: false, // 是否显示规格面板
       goods: {
        picture: "", // 弹出的商品展示面板上当前商品的的缩略图
      }, //当前商品信息对象
        goodsId: "", // 当前商品的id
         sku: {
        // 商品数据
        tree: [],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        hide_stock: false, // 是否隐藏剩余库存
      },
      id: "", // 产品id，来自productList的第一个数组项中的id
      badge: 0, // 当前购物车总的商品数量
       options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  props: [""],
  components: {
    Swiper,
  },
  methods: {
    //   返回
       onClickLeft() {
      this.$router.go(-1);
    },
    // 分享
    onClickRight() {
      this.showShare= true
    },
    //   点击加入购物车弹窗
addCarMaskFn(){
    this.show = true
},
// 点击购买
onBuyClicked(){},
// 加入购物车
 onAddCartClicked() {
      // 点击加入购物车
      console.log("点击加入购物车");
      // 获取当前商品面板的组件实例对象,(该对象中getSkuData方法 可以获取到当前购买的商品的数量)
      // console.log(this.$refs.myref.getSkuData());
      addCarData({
        goodsId: this.goodsId,
        productId: this.id,
        number: this.$refs.myref.getSkuData().selectedNum,
      }).then((res) => {
        // console.log(res);
        if (res.data.errno == 0) {
          // 添加购物车成功
          //   console.log(this);
          // 隐藏面板
          this.show = false;
          // 获取当前的商品的总数量并赋值给badge
          this.badge = res.data.data.cartTotal.goodsCount;
          this.$toast({
            type: "success",
            message: "已加入购物车",
            duration: 1000,
          });
        } else {
          // 加入失败
          this.$toast({
            type: "fail",
            message: "添加失败",
            duration: 1000,
          });
        }
      });
    },
  


  },
  created() {
    // console.log(this.$route.query);
    getDetail(this.$route.query)
      .then((res) => {
        console.log(res);
        this.gallery = res.data.data.gallery;
        this.info = res.data.data.info;
        this.attribute = res.data.data.attribute;
        this.goods_desc = res.data.data.info.goods_desc;
// console.log(this.goods_desc);
this.issue = res.data.data.issue;
        // map 返回值返回一个信息数组,forEach 没有返回值
        this.gallery = this.gallery.map((item) => {
          item.image_url = item.img_url;

          return item;
        });
        // 给当前组件上的数据分别赋值
        // 底部加入购物车数据
      this.goods.picture = res.data.data.info.list_pic_url;
      this.sku.price = res.data.data.info.retail_price;
      this.sku.stock_num = res.data.data.info.goods_number;
      this.goodsId = res.data.data.info.id;
      this.id = res.data.data.productList[0].id;
      })
      .catch((e) => {});
       // 获取当前购物车的总的商品数量
    getGoodsCount().then((res) => {
      //   console.log(res);
      // 获取当前的商品的总数量并赋值给badge
      this.badge = res.data.data.cartTotal.goodsCount;
    });
  },
  mounted() {},
  updated() {},
};
</script>
<style scoped lang='less'>
.detail {
padding-bottom: 20%;
    .to-back {
    position: fixed;
    top: 0.2rem;
    z-index: 999;
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    
    }
    .share{
        position: fixed;
    top: 0.2rem;
    right: 10px;
    z-index: 999;
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    }
  
  .info {
      text-align: center;
    h3 {
      font-weight: 900;
      font-size: 12px;
      line-height: 20px;
    }
    .p1 {
   
      font-size: 12px;
      line-height: 20px;
    }
    .p2 {
      color: red;
      font-size: 12px;
      line-height: 20px;
      
    }
  }
  .attribute{
     
      h3{
          font-size: 16px;
          font-weight: 200;
         margin-top: 0.2rem;
    background: #fff;
    padding: 0.2rem 4%;
      }
      ul{
        word-spacing: -0.10667rem;
        li{
           background: #efefef;
    line-height: .4rem;
    height: 0.4rem;
    margin-bottom: 0.1rem;
    border-radius: 0.10667rem;
    display: flex;
    justify-content: space-between;
            
.sp1{
    display: inline-block;
          width: 30%;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
      }
      .sp2{
     flex: 1;
    padding-left:10px;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

      }
        }
      }
      
  }
/deep/.imgbox{
   
    
    img{
       max-width: 100%;
    display: block;
    }
}
.textbox{
   ul li{
         h4{
        font-size: 16px;
        font-weight: 400;
        position: relative;
       padding-left: 20px;
       padding-bottom: 5px;
       color: red;
      
    } :before{
       content: "";
    width: 0.10667rem;
    height: 0.10667rem;
    background: #8b0000;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -0.05333rem;
   
    }
    .p3{
        font-size: 16px;
        padding-bottom: 5px;
       
    }
   }
  
}
/deep/.van-cell{
    padding: 0;
}
/deep/.ic{
    font-size: 15px;
    color: red;
    padding-left: 10px;
}
/deep/.ictext{
    font-size: 15px;
    font-weight: 600;
}
}
</style>